<template>
    <div>
    <mt-swipe :auto="4000">
        <!-- 在组件中使用v-for时候，一定要使用:key -->
      <mt-swipe-item v-for="item in swipelist" :key="item.id">
          <img :src="item.img||item.src" alt="" :class="{full:isfull}">
      </mt-swipe-item>
    </mt-swipe>
    </div>

    <!-- 分析：为什么商品详情的轮播图那么丑 -->
    <!-- 1.首页中的图片，他的高度和宽度都是100%
         2.在商品详情页面中的轮播图，如果都使用了100%的话，就不好看
         3.商品详情页面中 轮播图 期望：高度100% 宽度自适应
         4.经过分析：首页与商品详情页面中的轮播图第二分歧点是宽度的问题
         5.解决方法：调用者可以手动指定宽度是否为100%； -->
</template>

<script>
export default {
    props:['swipelist',"isfull"]
}
</script>

<style lang="scss" scoped>
.mint-swipe{
    height:200px;
}
.mint-swipe-item{
    text-align: center;

    img{
        height:100%;
    }
    .full{
        width:100%;
    }
}
</style>


